// Select2

select.select2 {
    opacity: 0;
}

.select2 {
    > select.form-control {
        opacity: 0;
    }
}

.select2-container--default {
    .select2-selection--single,
    .select2-selection--multiple {
        outline: none !important;
        @include e-rounded {
            border-radius: $input-border-radius;
        }

        @include e-not-rounded {
            border-radius: 0 !important;
        }

        height: auto;
        line-height: 0;
    }

    .select2-selection--single .select2-selection__arrow,
    .select2-selection--multiple .select2-selection__arrow {
        @include e-arrow-icon(down);
        border: 0;
        top: 50%;
        position: absolute;
        margin-top: 0;
        margin-left: 0;
        font-size: .85rem;
        left: auto;
        right: 0;
        display: inline-block;
        width: 1.9rem;

        b {
            display: none;
        }
    }


    .select2-selection--single .select2-selection__rendered {
        position: relative;
        padding: $input-btn-padding-y 3rem $input-btn-padding-y $input-btn-padding-x;
        line-height: $input-btn-line-height;
    }

    .select2-selection--multiple,
    .select2-selection--single .select2-selection__rendered {
        .select2-selection__clear {
            border: 0;
            position: absolute;
            top: 50%;
            @include e-la-icon-self('\f110');
            font-size: 1.4rem;
            display: inline-block;
            left: auto;
            right: $input-btn-padding-x + .85rem;
            margin-right: .4rem;
            margin-top: -1.25rem;
        }
    }

    .select2-selection--multiple .select2-selection__rendered {
        padding: ($input-btn-padding-y - .28rem) $input-btn-padding-x;
        line-height: $input-btn-line-height;

        .select2-selection__choice {
            padding: .05rem .4rem .05rem .4rem;
            font-size: 1rem;
            margin: .1rem .4rem .1rem 0;
            position: relative;
            float: left#{'/*rtl:right*/'};

            @include e-not-rounded {
                border-radius: $input-border-radius !important;
            }

            .select2-selection__choice__remove {
                @include e-la-icon-self('\f110');
                font-size: 1.4rem;
                display: inline-block;
                line-height: 0;
                margin-right: .3rem;
                position: relative;
                top: .1rem;
            }
        }

        .select2-search__field {
            font-weight: 400;
            margin: .25rem .25rem .25rem 0;
        }
    }

    .select2-search--dropdown .select2-search__field {
        outline: none !important;
        @include e-rounded {
            border-radius: $input-border-radius;
        }
        @include e-not-rounded {
            border-radius: 0 !important;
        }
        height: calc(1.5em + 0.9rem + 2px);
        padding: 0.45rem 1rem;
    }

    .select2-search--dropdown {
        padding: 15px 15px;
    }

    // results
    .select2-results__option {
        padding: 5px 15px;

        &[aria-disabled=true] {
            cursor: not-allowed;
        }

        .select2-results__group {
            padding: 5px 15px;
            font-weight: 600;
        }

        .select2-results__option {
            padding: 5px 30px;
        }
    }
}

.select2-container .select2-search--inline .select2-search__field {
    margin: 0;
}

// Select2 with bootstrap group input
.input-group {
    > .select2-hidden-accessible {
        &:first-child + .select2-container {
            > .selection {
                .select2-selection--single {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }

                &,
                &.form-control {
                    border-top-left-radius: 0;
                    border-bottom-right-radius: 0;
                    border-top-right-radius: 0;
                }
            }
        }

        // the most right
        &:not(:first-child) + .select2-container:last-child {
            > .selection {
                .select2-selection--single {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }

                .select2-selection {
                    &,
                    &.form-control {
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                    }
                }
            }
        }

        &:first-child + .select2-container + .input-group-text,
        &:not(:first-child) + .select2-container + .input-group-text {
            border-left: 0;
        }

        &:not(:first-child) + .select2-container:not(:last-child) {
            > .selection {
                .select2-selection--single {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }

                .select2-selection {
                    &,
                    &.form-control {
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }
            }
        }
    }
}

// skin

.select2-container--default {
    .select2-selection--multiple,
    .select2-selection--single {
        border: 1px solid $input-border-color;

        .select2-selection__placeholder {
            color: $input-placeholder-color;
        }
    }

    &.select2-container--focus,
    &.select2-container--open {
        .select2-selection--multiple,
        .select2-selection--single {
            border-color: $input-focus-border-color;
        }
    }

    .select2-selection--single .select2-selection__rendered {
        color: $input-plaintext-color;

        .select2-selection__clear {
            color: e-base-color(label, 2);
        }
    }

    .select2-selection--multiple .select2-selection__rendered {
        color: $input-plaintext-color;

        .select2-selection__choice {
            color: e-base-color(label, 2);
            background: e-base-color(grey, 1);
            border: 1px solid e-base-color(grey, 2);

            .select2-selection__choice__remove {
                color: e-base-color(label, 2);
            }
        }

        .select2-search__field {
            @include e-input-placeholder($input-placeholder-color);
        }
    }

    .select2-search--dropdown .select2-search__field {
        border: 1px solid $input-border-color;
    }

    //.select2-container--below.

    // dropdown
    .select2-dropdown {
        border: 1px solid $input-border-color;
        box-shadow: $e-dropdown-shadow;
    }

    // result options
    .select2-results__option {
        &[aria-selected=true] {
            background: e-base-color(grey, 1);
            color: e-base-color(label, 2);
        }

        &.select2-results__option--highlighted {
            background: e-base-color(grey, 1);
            color: e-base-color(label, 2);
        }
    }

    // disabled mode
    &.select2-container--disabled {
        cursor: not-allowed;

        .select2-selection--multiple,
        .select2-selection--single {
            cursor: not-allowed;
            background: e-base-color(grey, 1);
            border-color: e-base-color(label, 2);
        }
    }
}

// select2 components

.select2 {
    // pill style
    &.select2--air {
        .select2-container--default {
            .select2-selection--single,
            .select2-selection--multiple {
                box-shadow: $e-dropdown-shadow;
            }
        }
    }

    // pill style
    &.select2--solid {
        .select2-container--default {
            .select2-selection--multiple,
            .select2-selection--single {
                background-color: e-base-color(grey, 1);
                border-color: e-base-color(grey, 2);

                .select2-selection__placeholder {
                    color: $input-placeholder-color;
                }
            }
        }
    }
}